<template>
  <section class="mask video-mask" @click="cancelMask" v-show="showMask"><!--视频播放的遮罩层-->
  	<div class="video-box pa"><!--视频播放容器-->
  		<div class="v-cover">
  			<video :src="$store.state.url" ref="video" class="v-content" :poster="$store.state.cover"></video>
  		</div>
  		<div class="v-icon pa" @click="videoStar" v-if="showIcon"><!--播放按钮-->
  		</div>
  	</div>
  </section>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
export default{
  data(){
	  return{
	  	showIcon: true
	  }
  },
  computed: mapGetters([
    'showMask'
  ]),
  methods: {
    ...mapMutations([
      'pauseVideo'
    ]),
  	cancelMask (event) {//通过事件代理，只要判断className是视频遮罩层,执行以下操作
  		if (event.target.className === 'mask video-mask') {
        this.videoStop()
        this.pauseVideo()//关闭遮罩层
  		}
  	},
  	videoStar () {
  		this.showIcon = false
  		let video = this.$refs.video
  		video.play()
  	},
    videoStop () {
      this.showIcon = true
      let video = this.$refs.video
      video.pause()
    }
  },
  mounted () {
    let video = this.$refs.video
    video.onended = () => {
      this.showIcon = true
    }
  }
}
</script>

<style>
.video-box {
	width: 100%;
	height: 200px;
	top: 20%;
	padding: 0 20px;
	box-sizing: border-box;
}
.v-cover {
	height: 100%;
	background-color: #000;
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: center;
}
.v-icon {
	width: 90px;
	height: 90px;
	left: 50%;
	top: 50%;
	margin-left: -45px;
	margin-top: -45px;
	background: url('../assets/images/sprite.png') -2px -2px no-repeat;
}
.v-content {
	width: 100%;
	height: 100%;
}
</style>
